<template>
  <div>
    <div class="vidicon_header">
      <HeaderNavigation
        :headerContent="headerContent"
        @selTabClick="selTabClick"
      >
      </HeaderNavigation>
    </div>
    <div class="device_con">
      <TableCommonView 
        :table-list="tableList"
        @selCommonClick="selCommonClick"
        @selTableCol="selTableCol"
      >
        <template slot="tableButton">
          <el-table-column label="操作" width="220" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="btnEdit(scope.row)"
                style="margin-right: 5px">查看详情
              </el-button>
            </template>
          </el-table-column>
        </template>
      </TableCommonView>
    </div>
    <div class="list_pager">
      <PagerView
        class="page"
        :pager-options="productPagerOptions"
        :pageSizes="productPagerOptions.pageSizeOption"
        @current-change="currentProductHandler"
        @size-change="productChangeHandler"
      />
    </div>

  </div>
</template>

<script>
import HeaderNavigation from '@/views/deviceManage/devicePage/components/headerNavigation';
export default {
  name:"vidiconManage",
  props: {

  },
  components: {
    HeaderNavigation,
  },
  data() {
    return {
      headerContent:{
        title:"摄像机管理",
        infomation:{}
      },
      tableList: {}, 
      tableColumn: [
        { label: "设备名称", prop: "personPicUrl", min: 130,showImage:true,url:"123feeeeeeeee" },
        { label: "小区", prop: "enable", min: 150, isSwitch:true},
        { label: "抓拍数量", prop: "personName", min: 130, },
        { label: "安装时间", prop: "sex", min: 130 },
        { label: "设备心跳时间", prop: "idCard", min: 130 },
        { label: "设备箱编码", prop: "phoneNum", min: 130 },
        { label: "状态", prop: "monitorLevel", min: 130 },
      ],
      showCol: ["设备名称", "小区", "抓拍数量", "安装时间", "设备心跳时间", "设备箱编码", "状态",],
      productPagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount:0,
      },

    };
  },
  computed: {

  },
  created() {
    this.setTable()
  },
  mounted() {

  },
  watch: {

  },
  methods: {
    selTabClick(idx){
      console.log(idx,"选择")
      this.tabIndex=idx
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        showcol: this.showCol,
        allcol: [],
        selectBox: true,
        tableColumn: this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setColumnVisible(val)
    },
    setColumnVisible(showCol) {
      return this.tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    // 详情
    selCommonClick(row) {
      console.log(row, "详情")
    },
      // 分页前后跳转
    currentProductHandler(val) {
      this.productPagerOptions.currPage = val
      // this.getPersonList({
      //   tableId:this.thatSync.id,
      //   page: this.productPagerOptions.currPage,
      //   size: this.productPagerOptions.pageSize,
      //   contentValue: "",
      //   orderType: "desc",
      //   orderName: "createTime",
      // })
    },
    // 分页条目选择
    productChangeHandler(val) {
      this.productPagerOptions.pageSize=val
      // this.getPersonList({
      //   tableId:this.thatSync.id,
      //   page: this.productPagerOptions.currPage,
      //   size: this.productPagerOptions.pageSize,
      //   contentValue: "",
      //   orderType: "desc",
      //   orderName: "createTime",
      // })
    },

  },
};
</script>

<style scoped lang="scss">
.device_con{
  margin-right: 20px;
  height: calc(100vh - 200px);
}
.list_pager{
  display: flex;
  justify-content: flex-end;
  margin-right:20px;
  color:#fff;
}
</style>
